<template>
    <view class="u-page">
        <up-list
            @scrolltolower="scrolltolower"
        >
            <up-list-item
                v-for="(item, index) in indexList"
                :key="index"
            >
                <up-cell
                    :title="`列表长度-${index + 1}`"
                >
                    <template #icon>
                        <up-avatar
                            shape="square"
                            size="35"
                            :src="item.url"
                            customStyle="margin: -3px 5px -3px 0"
                        ></up-avatar>
                    </template>
                </up-cell>
            </up-list-item>
        </up-list>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

const indexList = reactive([]);
const urls = [
    'https://uview-plus.jiangruyi.com/album/1.jpg',
    'https://uview-plus.jiangruyi.com/album/2.jpg',
    'https://uview-plus.jiangruyi.com/album/3.jpg',
    'https://uview-plus.jiangruyi.com/album/4.jpg',
    'https://uview-plus.jiangruyi.com/album/5.jpg',
    'https://uview-plus.jiangruyi.com/album/6.jpg',
    'https://uview-plus.jiangruyi.com/album/7.jpg',
    'https://uview-plus.jiangruyi.com/album/8.jpg',
    'https://uview-plus.jiangruyi.com/album/9.jpg',
    'https://uview-plus.jiangruyi.com/album/10.jpg',
];

onLoad(() => {
    loadmore();
});

const scrolltolower = () => {
    loadmore();
};

const loadmore = () => {
    for (let i = 0; i < 30; i++) {
        indexList.value.push({
            url: urls[uni.$u.random(0, urls.length - 1)],
        });
    }
};
</script>
